<template>
  <div class="hello">



<el-row class="buttongroup">
    <el-button type="primary" v-on:click="start">获取本地设备</el-button>
    <el-button type="success" v-on:click="call">呼叫远端</el-button>
    <el-button type="danger" v-on:click="huangup"> 挂断</el-button>
</el-row>



<el-row :gutter="20">
  <el-col :span="4"><div class="grid-content"></div></el-col>
  <el-col :span="8">
    <div class="grid-content bg-purple">
      <video autoplay id="localst"  playsinline></video>     
    </div>

        <el-input
      type="textarea"
      :rows="10"
      placeholder="本地sdp信息"
      v-model="localtextarea">
    </el-input>
  </el-col>





  <el-col :span="8">
    <div class="grid-content bg-purple">
       <video autoplay id="remotest"  playsinline></video>    
    </div>

      <el-input
    type="textarea"
    :rows="10"
    placeholder="远端sdp信息"
    v-model="remotetextarea">
  </el-input>

  </el-col>

</el-row>









  </div>
</template>
<script>
import * as io from 'socket.io-client'
import adapter from 'webrtc-adapter'

export default {
  name: 'onetoone',
  data() {
    return {
      socket:Object,
      isconnect:false,
      content:"",
      msginput:"",
      room:"",
      username:"",
      localstsrc:"",
      remotestrc:"",
      pc1:Object,
      pc2:Object,
      localtextarea:"",
      remotetextarea:"",

    }
  },
  methods:{

    start:function(){
      // 确认是否支持webrtc
      if(!navigator.mediaDevices||!navigator.mediaDevices.getUserMedia){
        console.log("get user media not supported!")
        return
      }else{
        //设置需要什么媒体数据 这里设置音频和视频
        let constraints={
          video:true,
          audio:true
        }
        //获取音频和视频的媒体流
        navigator.mediaDevices.getUserMedia(constraints)
        .then((stream)=>{
          // 获取成功后触发回调 把媒体流写入准备好的video标签
          let localst=document.querySelector('#localst')
          localst.srcObject = stream
          console.log(stream)
          this.localstsrc=stream
        })
        .catch((err)=>{
          console.log("faild get usermedia stream",err.message)
          console.log(err.message)
          console.log(err.name)
          console.log(err.code)
          alert(err.code)
           alert(err.message)
           alert(err.name)
        })
      }
      console.log("start")
    },
    call:function(){
      let pcConfig = {
        iceServers: [
          {
            urls: ["turn:www.zhenyangyang.com:3478"],
            username: "yang",
            credential: "123"
          }
        ]
      };


        // 创建本地和远端的 PeerConnection
        this.pc1=new RTCPeerConnection(pcConfig);
        this.pc2=new RTCPeerConnection(pcConfig);
        this.pc1.onicecandidate = (e)=>{
           console.log(4)
            console.log("find an new candidate")
            console.log(e)
          this.pc2.addIceCandidate(e.candidate)
        }
        this.pc2.onicecandidate = (e)=>{
           console.log(5)
            console.log(e)
          this.pc1.addIceCandidate(e.candidate)
        }

        this.pc2.ontrack = (e)=>{
           console.log(3)
          console.log("get new remot track",e)
          let remotest=document.querySelector('#remotest')
          remotest.srcObject = e.streams[0]
        }
        // 1、首先获取可用的音频轨和视频轨给pc1
        this.localstsrc.getTracks().forEach(track => {
          console.log(1)
          this.pc1.addTrack(track,this.localstsrc)
        });
        let offerOptions={
          offerToReceiveAudio:1,
          offerToReceiveVideo:1
        }
        //2、然后由pc1发起offer 成功后触发回调。回调里由pc2应答answer 与此同时设置本地和远端的sdp描述 此时触发onicecandidate
        this.pc1.createOffer(offerOptions).then((desc)=>{
           console.log(2)
          this.pc1.setLocalDescription(desc)
          this.localtextarea=desc.sdp

          this.pc2.setRemoteDescription(desc)
          this.pc2.createAnswer().then((desce)=>{
            this.remotetextarea=desce.sdp
            this.pc2.setLocalDescription(desce)
            this.pc1.setRemoteDescription(desce)
            // 此时触发onicecandidate
          }).catch((e)=>{
            console.log(e)
          })
          console.log(111)
        }).catch()

      console.log("call")
    },
    huangup:function(){
      this.pc1.close()
      this.pc2.close()
      this.pc1=null
      this.pc2=null
      console.log("huangup")
    },        
  }
}

</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  padding: 20px;
  border-radius: 4px;
  min-height: 330px;
}
video{
  height: 300px;
  object-fit:fill;
}
.buttongroup{
  margin-top: 30px;
  margin-bottom: 20px;
}
</style>
